<template>
  <div class="app-container">
    <h2 style="color: darkslateblue">学生选课成绩信息</h2>
    <!--  表单 -->
    <el-table
      :data="selectedList"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="courseName" label="课程" />

      <el-table-column prop="credit" label="学分" width="80" align="center" />

      <el-table-column label="类别" width="100" align="center">
        <template slot-scope="scope">
          <p v-if="scope.row.courseType == 1">公共任选</p>
          <p v-else>专业限选</p>
        </template>
      </el-table-column>

      <el-table-column label="任课教师" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="getTeacherInfo(scope.row.teacherId)">{{
            scope.row.teacherName
          }}</el-button>
        </template>
      </el-table-column>

      <el-table-column prop="classTime" label="上课时间" />

      <el-table-column prop="classPlace" label="上课地点" />
      <el-table-column prop="score" label="教师评分打分" />
    </el-table>

    <!-- 详情对话框 -->
    <el-dialog title="教师详情" :visible.sync="dialogTeacherInfoFormVisible">
      <el-card class="box-card" style="width: 100%">
        <div class="el-divider el-divider--horizontal">
          <div class="el-divider__text is-center">基本信息</div>
        </div>
        <div class="el-row">
          <div class="el-col el-col-8">
            <div>
              <div class="el-form-item">
                <label class="el-form-item__label">照片:</label>
                <div class="el-form-item__content">
                  <div class="demo-image">
                    <div class="block">
                      <div class="demo-image__preview">
                        <el-image
                          style="
                            width: 150px;
                            height: 150px;
                            border: 3px solid #ddd;
                          "
                          :src="teacher.photo"
                          @click="picturePreview('photo')"
                        />
                      </div>
                    </div>
                  </div>
                  <!---->
                </div>
              </div>
            </div>
          </div>
          <div class="el-col el-col-8">
            <div class="el-form-item">
              <label class="el-form-item__label">姓名:</label>
              <div class="el-form-item__content">
                <el-label>{{ teacher.name }}</el-label>
                <!---->
              </div>
            </div>
          </div>
          <div class="el-col el-col-8">
            <div class="el-form-item">
              <label class="el-form-item__label">性别:</label>
              <div class="el-form-item__content">
                <el-label>{{ teacher.gender == 0 ? "男" : "女" }}</el-label>
                <!---->
              </div>
            </div>
          </div>
          <div class="el-col el-col-8">
            <div class="el-form-item">
              <label class="el-form-item__label">身份证号:</label>
              <div class="el-form-item__content" style="width: 220px">
                <!-- <el-label>{{ teacher.identityNumber }}</el-label> -->
                <!---->
              </div>
            </div>
          </div>
        </div>
        <div class="el-row">
          <div class="el-col el-col-8">
            <div class="el-form-item">
              <label class="el-form-item__label">出生日期:</label>
              <div class="el-form-item__content">
                <!-- <el-label>{{ teacher.birth }}</el-label> -->
                <!---->
              </div>
            </div>
          </div>
          <div class="el-col el-col-8">
            <div class="el-form-item">
              <label class="el-form-item__label">籍贯:</label>
              <div class="el-form-item__content">
                <!-- <el-label>{{ teacher.nativeplace }}</el-label> -->
                <!---->
              </div>
            </div>
          </div>
          <div class="el-col el-col-8">
            <div class="el-form-item">
              <label class="el-form-item__label">政治面貌:</label>
              <div class="el-form-item__content">
                <!-- <el-label v-if="teacher.political == 1">中共党员</el-label>
                <el-label v-else-if="teacher.political == 2">共青团员</el-label>
                <el-label v-else>群众</el-label> -->
                <!---->
              </div>
            </div>
          </div>
        </div>
        <div class="el-row">
          <div class="el-col el-col-8">
            <div class="el-form-item">
              <label class="el-form-item__label">联系电话:</label>
              <div class="el-form-item__content">
                <el-label>{{ teacher.phone }}</el-label>
                <!---->
              </div>
            </div>
          </div>
          <div class="el-col el-col-8">
            <div class="el-form-item">
              <label class="el-form-item__label">邮箱:</label>
              <div class="el-form-item__content">
                <el-label>{{ teacher.email }}</el-label>
                <!---->
              </div>
            </div>
          </div>
        </div>
        <div class="el-divider el-divider--horizontal">
          <div class="el-divider__text is-center">教职信息</div>
        </div>
        <div class="el-row">
          <div class="el-col el-col-8">
            <div class="el-form-item">
              <label class="el-form-item__label">教职工号:</label>
              <div class="el-form-item__content">
                <el-label>{{ teacher.teacherNumber }}</el-label>
              </div>
            </div>
          </div>
          <div class="el-col el-col-8">
            <div class="el-form-item">
              <label class="el-form-item__label">所属学院:</label>
              <div class="el-form-item__content">
                <el-label>{{ teacher.collegeName }}</el-label>
              </div>
            </div>
          </div>
          <div class="el-col el-col-8">
            <div class="el-form-item">
              <label class="el-form-item__label">职称:</label>
              <div class="el-form-item__content">
                <el-label>{{ teacher.title }}</el-label>
              </div>
            </div>
          </div>
        </div>
        <div class="el-row">
          <div class="el-col el-col-8">
            <div class="el-form-item">
              <label class="el-form-item__label">入职时间:</label>
              <div class="el-form-item__content">
                <el-label>{{ teacher.hiredate }}</el-label>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import permission from '@/directive/permission/index.js' // 导入权限判断指令，可用v-permisson

import FilenameOption from './components/FilenameOption'
import AutoWidthOption from './components/AutoWidthOption'
import BookTypeOption from './components/BookTypeOption'

import { mapGetters } from 'vuex'

import courseSelectApi from '@/api/st/courseSelect'
import teacherApi from '@/api/te/teacher'

export default {
  directives: { permission }, // 导入组件
  components: { FilenameOption, AutoWidthOption, BookTypeOption },

  computed: {
    ...mapGetters(['id', 'roles', 'avatar'])
  },

  data() {
    return {
      selectedList: [],
      teacher: {},

      dialogVisible: false, // 图片放大对话框状态
      dialogImageUrl: '', // 图片放大对话框url
      dialogTeacherInfoFormVisible: false, // 教师详情对话框状态

      // 分页用的data
      page: 1, // 当前页
      limitNumber: 10, // 每页记录数
      total: 0, // 总记录数
      dataQuery: {}, // 筛选条件封装对象

      multipleSelection: [], // 多选的对象数组

      // 下载xlsx用的data
      downloadLoading: false, // 读取进度条
      filename: 'student', // 文件名
      autoWidth: true,
      bookType: 'xlsx'
    }
  },

  created() {
    this.getStudent()
  },

  methods: {
    handleSelectionChange() {},
    // 获取教师详细信息
    getTeacherInfo(id) {
      teacherApi.getTeacherById(id).then((res) => {
        this.teacher = res.data.teacher
        if (this.teacher.hiredate) {
          this.teacher.hiredate = this.$moment(this.teacher.hiredate).format(
            'YYYY-MM-DD'
          )
        }
        if (this.teacher.birth) {
          this.teacher.birth = this.$moment(this.teacher.birth).format(
            'YYYY-MM-DD'
          )
        }
        this.dialogTeacherInfoFormVisible = true
      })
    },
    // 图像放大
    picturePreview(name) {
      if (name == 'photo') {
        this.dialogImageUrl = this.student.photo
      } else if (name == 'lecense') {
        this.dialogImageUrl = this.student.lecense
      }
      this.dialogVisible = true
    },

    // 获取学生
    getStudent() {
      // 获取选课以及分数
      courseSelectApi.getSelectedCourseclass(this.id).then((res) => {
        this.selectedList = res.data.list
      })
    }

  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
